<template>
  <div class="mod-config">
  <el-card v-loading="dataListLoading">
    <el-form :inline="true" :model="dataForm" size="mini">
      <el-form-item>
        <strong>合同创建时间:</strong>
        <el-date-picker v-model="dataForm.startDate" type="date" value-format="yyyy-MM-dd" placeholder="起始时间" class="date_type" @change="getDataList"></el-date-picker>至
        <el-date-picker v-model="dataForm.endDate" type="date" value-format="yyyy-MM-dd" placeholder="结束时间" class="date_type" @change="getDataList"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="搜索关键字" clearable @change="getDataList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList"  icon="el-icon-search">查询</el-button>
        <el-button type="success" @click="exportExcelHandle"  icon="el-icon-printer">导出Excel</el-button>
      </el-form-item>
    </el-form>
    <div id="chartId">
      <div class="chart_title">
        <div>{{'合同签收统计表'}}</div>
        <div class="date_title">{{monthTitle}}</div>
      </div>
      <el-table :data="dataList" border style="width: 100%;" :header-cell-style="{background: 'steelblue',color:'white'}" :span-method="dataMerging" @sort-change="changeSort">
        <el-table-column prop="contractNo" header-align="center" align="center" width="120" label="合同编号" sortable="custom" :sort-orders="['descending','ascending']"></el-table-column>
        <el-table-column prop="contractName" header-align="center" align="left" label="合同名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="contractBusiness" header-align="center" align="center" width="120" label="业务负责人" sortable="custom" :sort-orders="['descending','ascending']"></el-table-column>
        <el-table-column prop="contractOrigin" header-align="center" align="center" label="业务来源" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column header-align="center" align="center" label="已签收项目" width="120">
          <template slot-scope="scope">
            <strong>{{getSignNum(scope.row)}}</strong>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="项目数量" width="120">
          <template slot-scope="scope" >
            <strong>{{getProNum(scope.row)}}</strong>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" header-align="center" align="center" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="isSign" header-align="center" align="center" label="是否签收" width="100">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.isSign == 1" size="small" type="success">已签收</el-tag>
            <el-tag v-else size="small" type="info">未签收</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      dataListLoading: false,
      dataList: [],
      dataForm: {
        startDate: '',
        endDate: '',
        key: '',
        sidx: 'id',
        order: ''
      },
      monthTitle: ''
    }
  },
  created () {
    this.dataForm.startDate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
    this.dataForm.endDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1 , 0)
    this.getDataList()
  },
  methods: {
    // 排序字段改变
    changeSort (val) {
      console.log(val)
      switch (val.order) {
        case 'ascending':
          this.dataForm.order = 'asc'
          break
        case 'descending':
          this.dataForm.order = 'desc'
          break
        default:
          this.dataForm.order = 'desc'
      }
      if (val.prop === 'contractNo') {
        this.dataForm.sidx = 'id'
      } else {
        this.dataForm.sidx = val.prop
      }
      this.getDataList()
    },
    getSpanArr (data) {
      this.spanArr = []
      let pos = 0
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          pos = 0
        } else {
          if (data[i].contractNo === data[i - 1].contractNo) {
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            pos = i
          }
        }
      }
      this.dataList = data
    },
    dataMerging ({row, column, rowIndex, columnIndex}) {
      if (columnIndex < 6) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合计项目数
    getProNum (data) {
      let sum = 0
      for (let i = 0; i < this.dataList.length; i++) {
        if (data.contractNo === this.dataList[i].contractNo) {
          sum++
        }
      }
      return sum
    },
    // 获取签收数量
    getSignNum (data) {
      let signSum = 0
      for (let i = 0; i < this.dataList.length; i++) {
        if (data.contractNo === this.dataList[i].contractNo && this.dataList[i].isSign === 1) {
          signSum += 1
        }
      }
      return signSum
    },
    // 获取数据列表
    getDataList () {
      let startDate = ''
      let endDate = ''
      if (this.dataForm.startDate != null) startDate = moment(new Date(this.dataForm.startDate)).format('YYYY-MM-DD')
      if (this.dataForm.endDate != null) endDate = moment(new Date(this.dataForm.endDate)).format('YYYY-MM-DD')
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/project/contract/signList'),
        method: 'get',
        params: this.$http.adornParams({
          'key': this.dataForm.key,
          'sidx': this.dataForm.sidx,
          'order': this.dataForm.order,
          'startDate': startDate,
          'endDate': endDate
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
          this.getSpanArr(data.list)
        } else {
          this.dataList = []
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 导出excel
    exportExcelHandle () {
      this.dataListLoading = true
      let startDate = moment(this.dataForm.startDate).format('YYYY-MM-DD')
      let endDate = moment(this.dataForm.endDate).format('YYYY-MM-DD')
      this.$http({
        url: this.$http.adornUrl('/project/contract/exportSign'),
        method: 'get',
        params: this.$http.adornParams({
          'key': this.dataForm.key,
          'sidx': this.dataForm.sidx,
          'order': this.dataForm.order,
          'startDate': startDate,
          'endDate': endDate
        }),
        responseType: 'blob'
      }).then(({data}) => {
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(data) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '合同签收列表（' + startDate + '至' + endDate + '）.xls' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.dataListLoading = false
      })
    }
  }
}
</script>

<style scoped>
.date_type {
  width: 140px;
}
.date_type /deep/ .el-input__inner {
  color: #3b97d7;
  font-weight: bolder;
}
.chart_title{
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
}
.chart_title .date_title{
  margin-top: 4px;
  font-size: 17px;
  font-weight: 500;
}
</style>
